<template>
  <div class="itemTow-box">
    <b class="animation-3"></b>
    <b class="animation-2" :class="{'animation-2': true, [imgList2[item.status]]: true}"></b>
    <i :class="{'imgBg': true, [imgList[item.status]]: true}"/>
    <p :style="{ display: 'block', color: colorList[item.status] }" class="number text-3xl font-bold">{{ item.lineCode }}</p>
    <div class="text-num">
      <span style="display: block">{{ item.timeStr }}</span>
    </div>
    <itemDialog ref="itemDialogRef"/>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'
import itemDialog from './itemDialog.vue'
//接收组件传值
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => {
      return {
      }
    },
  },
})
const itemDialogRef = ref()
const colorList ={
  '开机':'#0285fe',
  '生产':'#0ac1c6',
  '停机':'#d98600',
  '故障':'#ff2300',
  '运行':'#1feb06',
}
const imgList ={
  '开机':'animation-3-1',
  '生产':'animation-3-2',
  '停机':'animation-3-3',
  '故障':'animation-3-4',
  '运行':'animation-3-5',
}
const imgList2 ={
  '开机':'animation-2-1',
  '生产':'animation-2-2',
  '停机':'animation-2-3',
  '故障':'animation-2-4',
  '运行':'animation-2-5',
}
const open = (item) => {
  itemDialogRef.value.openAddDialog(item)
}
</script>

<style scoped lang="scss">
.itemTow-box{
  position: relative;
  //width: 239px;
  //height: 79px;
  width: 160px;
  height: 78px;
  background: url("../images/bg01bigindex.png") 0 0 no-repeat;
  background-size: 100% 100%;
  font-family: 'electronicFont';
  font-size: 20px;
  color: #fff;
  padding: 10px 0 0 0;
  margin-top: 15px;

  .number{
    text-align: center;
  }
}

.animation-2 {
  position: absolute;
  right: -6px;
  bottom: -6px;
  height: 15px;
  width: 15px;

}
.animation-2-1 {
  background: url(../images/bule101.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-2-2 {
  background: url(../images/bg03bigindex.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-2-3 {
  background: url(../images/yello101.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-2-4 {
  background: url(../images/red101.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-2-5 {
  background: url(../images/green101.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-3 {
  position: absolute;
  right: 0;
  bottom: 2px;
  //width: 229px;
  width: 160px;
  height: 8px;
}
.animation-3-1 {
  background: url(../images/bule01.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-3-2 {
  background: url(../images/bg02bigindex.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-3-3 {
  background: url(../images/yello01.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-3-4 {
  background: url(../images/red01.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.animation-3-5 {
  background: url(../images/green01.png) 0 0 no-repeat;
  background-size: 100% 100%;
}

.imgBg{
  position: absolute;
  top: 1px;
  right: 0px;
  width: 20px;
  height: 22px;


}

.text-num{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 41px;
  width: 100%;
}
</style>
